<template>
	<view>
		<!-- 客户组详情 -->
		<view class="details-content">
			<view class="name-item">
				<u-tag :text="details.type" mode="plain" type="primary" size="mini"/>
				<text class="u-p-l-10 u-font-32">{{details.name}}</text>
				<view class="u-p-t-10"><text class="u-tips-color u-font-24">所属地区：{{details.city.cityname}}</text></view>
				<!-- <view class="u-p-t-10"><text class="u-tips-color u-font-24">管理模式：{{details.financemode}}</text></view> -->
			</view>
			<view class="data-item u-p-t-20">
				<u-grid :col="3">
					<u-grid-item>
						<text class="u-tips-color u-font-24">账户余额</text>
						<view class="grid-text u-p-t-10 u-font-28">{{details.balance}}<text class="u-font-24">元</text></view>
					</u-grid-item>
					<u-grid-item>
						<text class="u-tips-color u-font-24">账户积分</text>
						<view class="grid-text u-p-t-10 u-font-28">{{details.integral}}<text class="u-font-24">分</text></view>
					</u-grid-item>
					<u-grid-item>
						<text class="u-tips-color u-font-24">累计提现</text>
						<view class="grid-text u-p-t-10 u-font-28">{{Math.abs(details.cashout)}}<text class="u-font-24">元</text></view>
					</u-grid-item>
					<u-grid-item>
						<text class="u-tips-color u-font-24">订单总数</text>
						<view class="grid-text u-p-t-10 u-font-28">{{details.ordercount}}<text class="u-font-24">条</text></view>
					</u-grid-item>
					<u-grid-item>
						<text class="u-tips-color u-font-24">客户组类型</text>
						<view class="grid-text u-p-t-10 u-font-28">{{details.type}}</view>
					</u-grid-item>
					<u-grid-item>
						<text class="u-tips-color u-font-24">下属部门</text>
						<view class="grid-text u-p-t-10 u-font-28">{{details.departmentcount}}<text class="u-font-24">个</text></view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- 客户组下属部门列表 -->
		<view class="u-p-30">
			<u-button type="primary" @click="buildDeparment">新建部门</u-button>
		</view>
		<view class="u-tips-color u-p-l-20 u-p-t-20 u-p-r-20"><text class="u-font-24">共{{details.departmentcount}}个下属部门：</text></view>
		<view class="u-p-l-20 u-p-t-20 u-p-r-20">
			<u-search v-model="key" placeholder="搜索部门" :clearabled="true" shape="square" :show-action="true" :animation="true" @change="searchKeyword"></u-search>
		</view>
		<navigator
			:url="`../department/department?id=${item.id}`" 
			class="list"
			v-for="(item,index) in departmentList"
			:key="index">
			<view class="">
				<!-- <u-tag :text="item.type" mode="plain" type="primary" size="mini"/> -->
				<text class="u-font-32">{{item.department}}</text>
			</view>
			<view class="u-flex">
				<text class="label u-tips-color u-font-24">负责人：</text>
				<text class="u-text-right u-font-24" v-if="item.user.name">{{item.user.name || '未绑定'}}</text>
				<text v-else class="color-danger">未绑定</text>
			</view>
			<view class="text">
				<view class="u-flex">
					<text class="label u-tips-color u-font-24">所属地区</text>
					<text class="u-flex-1 u-text-right u-font-24">{{item.cityname}}</text>
				</view>
				<view class="u-flex">
					<text class="label u-tips-color u-font-24">注册时间</text>
					<text class="u-flex-1 u-text-right u-font-24">{{$u.timeFormat(item.regdate.replaceAll('-','/'), 'yyyy-mm-dd hh:MM:ss')}}</text>
				</view>
			</view>
		</navigator>
		<view class="u-p-30">
			<u-loadmore :status="loadStatus"></u-loadmore>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				// 客户组详情
				details:{
					city:{},
					cashout: 0
				},
				// 客户组下属部门列表
				pageIndex: 1,
				pageSize: 10,
				loadStatus: 'loading',
				departmentList:[],
				key: ''
			}
		},
		onLoad(opt) {
			this.id = opt.id
			// this.getDetails()
			// this.getDepartment()
		},
		onReachBottom(){
			this.pageIndex += 1
			this.getDepartment(false)
		},
		onShow() {
			this.getDetails()
			this.getDepartment()
		},
		methods: {
			buildDeparment(){
				uni.navigateTo({
					url: '/pages/my/enterprises/create/create?id='+this.id
				})
			},
			// 客户组详情
			getDetails(){
				this.$u.get('/Enterprise/Detail?id='+this.id).then((res)=>{
					console.log('客户组详情:',res)
					this.details = res
				})
			},
			// 客户组的下级部门列表
			getDepartment(renew = true){
				this.loadStatus = 'loading'
				if(renew == true){
					this.PageIndex = 1
					this.departmentList = []
				}
				this.$u.post('/Enterprise/List',{
					"key": this.key,
					"pageIndex": this.pageIndex,
					"pageSize": this.pageSize,
					"parentId": this.id,
				}).then((res)=>{
					console.log('客户组的下级部门列表:',res)
					// this.departmentList = res.rows
					
					if (res.rows.length > 0) {
						res.rows.forEach((item) => {
							this.departmentList.push(item)
						})
						if (res.rows.length < this.PageSize) {
							this.loadStatus = "nomore"
						} else {
							this.loadStatus = "loadmore"
						}
					}else{
						this.loadStatus = "nomore"
					}
				})
			},
			// 搜索部门关键词
			searchKeyword(val){
				this.pageIndex = 1
				this.key = val
				this.getDepartment()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.details-content{
		background-color: #fff;
		padding: 30rpx;
		box-shadow: $u-color-border-shadow;
	}
	.list {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		.text{
			font-size: 24rpx;
			margin: 20rpx 0 0 0;
			line-height: 40rpx;
		}
	}
</style>
